<template>
  <div id="expertList">
    <header>
      <i @click="goBack()"></i>
      <div>选择专家</div>
      <a href="tel: 4006062030">
        <img src="../../../image/tele.png" alt="">
      </a>
    </header>
    <div class="docIntroBox" v-show="showdocIntroBox" @click.stop='showdocIntroBox = false'>
      <div class="docIntro" @click.stop='showdocIntroBox = true'>
        <img class="closebtn" src="../../../image/closed_doctor_suggests@2x.png" width="28" alt="" @click.stop='showdocIntroBox = false'>
        <h3>{{currentDoctor.name}}</h3>
        <!-- <img class="docPic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520828553573&di=76bb86dfd84b80eb278ed7c260f65b56&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F902397dda144ad34357b45a5daa20cf430ad85c8.jpg" alt="" width="60" height="60"> -->
        <div class="left">
          <div>简介: {{currentDoctor.introduct || '暂无简介哦'}}</div>
        </div>
      </div>
    </div>
    <ul class="list">
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <div class='mengceng' v-if="list.length<1">
          <!-- <img src="../../../image/no_collection@2x.png" width='110' alt=""> -->
          <p>暂无专家!</p>
        </div>
        <li v-for='(item,index) in list' :key='index' v-if="list.length>0">
          <span @click="showIntroduction(item)">{{item.name}}</span>
          <label for="">
            <span class='text'>{{item.content}} </span>
            <input type="checkbox" v-model="expertArr" :value="item.id">
            <span></span>
          </label>
        </li>
      </Loadmore>
    </ul>
    <div class='next'>
      <a @click='goNext()'>下一步</a>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [], //所有专家列表
        currentDoctor: {}, //用户点击的医生对象
        obj: {

        }, //医生申请会诊订单对象
        sentPage: {
          page: 1, //分页累加
          sidx: 'favorable_rate',
          sord: 'desc',
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false,
        expertArr: [],
        showdocIntroBox: false, //是否显示医生详情弹窗 默认否
        currentDoc: {}, //当前点中的医生详情 如图片 简介
      }
    },
    components: {
      Loadmore
    },
    methods: {
      //返回上一级
      goBack() {
        this.$router.back();
      },
      // 获取医生列表
      getList(params) {
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/expert/1", params, r => {
          this.totalNum = r.data.records;
          if (this.sentPage.page == 1) {
            this.list = r.data.rows;
          } else {
            this.list = this.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0 && this.sentPage.page > 1) {
            this.$utils._toast("暂无更多数据");
          }
          if (this.totalNum == this.list.length) {
            this.allLoaded = true;
          }
        }, err => {
          console.log(err);
        })
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getList(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      // 选择医生后下一步
      goNext() {
        this.obj.expertArr = JSON.stringify(this.expertArr);
        if (this.expertArr.length > 5 || this.expertArr.length < 3) {
          this.$utils._toast("选择医专家不得少于3位 不得多于5位");
        } else {
          this.$router.push({
            name: "payConsultation",
            query: {
              obj: JSON.stringify(this.obj)
            }
          });
        }
      },
      // 医生简介弹窗 
      showIntroduction(item) {
        this.currentDoctor = item;
        this.showdocIntroBox = true;
      },
      // 获取医生需求
      init() {
        if (this.$route.query.obj) {
          this.obj = JSON.parse(this.$route.query.obj);
          this.obj.price = '';
        }
      },
    },
    mounted() {

    },
    created() {
      this.init();
      this.getList();
    }
  }

</script>
<style lang="scss" scoped>
  .mengceng {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  #expertList ul.list li>span {
    flex: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

</style>
